<template>
    <div>
        <el-dialog :visible="authDialog" width="60%" :show-close="false" class="authDia" center title="请进行实名认证">
            <el-container style="height: 400px;padding: 0;">
                <el-main style="display: flex;justify-content:space-between;position: relative;padding: 0;">
                    <div style="width: 50%;background: #F9FAFE;text-align: center;align-items: center;display: flex;margin-top: -110px;">
                        <div style="width: 250px;text-align: left;margin: 0 auto;">
                            <div style="margin-top: 20px;">
                                <span class="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">真实姓名</span>
                                <div style="margin-top: 2px;">
                                    <input class="input" placeholder="请输入真实姓名" disabled v-model.trim="users.realName"></input>
                                </div>
                            </div>
                            <div style="margin-top: 20px;">
                                <span style="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">身份证号</span>
                                <div style="margin-top: 2px;">
                                    <input class="input" placeholder="请输入身份证号" disabled v-model.trim="users.identity"></input>
                                </div>
                            </div>
                            <div style="margin-top: 20px;">
                                <span class="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">手机号</span>
                                <div style="margin-top: 2px;">
                                    <input class="input" placeholder="请输入手机号" v-model.trim="users.telephone"></input>
                                </div>
                            </div>
                            <div style="margin-top: 20px;">
                                <span class="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">验证码</span>
                                <div style="margin-top: 2px;">
                                    <input class="input" style="width: 100px;" placeholder="请输入验证码" v-model.trim="form.code"></input>
                                    <input readonly="readonly" :value="verifyCode" :disabled="disabled" style="width: 36%;cursor: pointer;text-align: center;border: 1px solid #0C67D0;padding: 5px 10px;border-radius: 6px;color: #0C67D0;background: #ffffff;outline: none;"
                                        @click="getVerifyCode" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 50%;background: #FFFFFF;text-align: center;">
                        <div style="width: 250px;text-align: left;margin: 0 auto;">
                            <div style="background:rgba(255,255,255,1);border-radius:4px;margin-top: 3px;margin-right: 20px;">
                                <span class="font-size:12px;color:rgba(102,102,102,1);line-height:17px;">上传身份证人面照片</span>
                                <el-upload action='' id="card" drag class="upload-demo" list-type="picture"
                                    :before-upload="onBeforeUpload" :on-change="changeIdentity" :show-file-list="false">
                                    <div v-if="String.isEmptyOrNUll(form.identity_base64)">
                                        <img src="/static/img/login/identity.png" style="width: 50px;height: 50px;margin-top: 30px;margin-bottom: 11px;" />
                                        <p style="font-size:14px;color:rgba(86,86,86,1);margin-bottom: 4px;">点击或将图片拖拽到这里上传</p>
                                        <p style="font-size:12px;color:rgba(0,0,0,0.45);">支持jpg和png格式</p>
                                    </div>
                                    <div v-else>
                                        <img :src="form.identity_base64" class="fill" />
                                    </div>
                                </el-upload>
                            </div>
                            <div style="height:100px;background:rgba(255,255,255,1);border-radius:4px;margin-top: 3px;display: flex;justify-content: space-between;">
                                <div>
                                    <div style="height:17px;font-size:12px;font-weight:400;ine-height:17px;color:rgba(102,102,102,1);margin-top: 24px;">上传1寸证件照</div>
                                    <div style="height:20px;font-size:14px;font-weight:400;ine-height:20px;color:rgba(102,102,102,1);margin-top: 10px;">照片大小200k左右</div>
                                    <div style="height:17px;font-size:12px;font-weight:400;ine-height:17px;color:rgba(102,102,102,1);">支持jpg和png格式</div>
                                </div>
                                <el-upload action='' id="photo" drag class="upload-demo" list-type="picture"
                                    :before-upload="onBeforeUpload" :on-change="changePortrait" :show-file-list="false">
                                    <img v-if="String.isEmptyOrNUll(form.portrait_base64)" src="/static/img/login/photo.png"
                                        style="width:30px;height:30px;margin-top: 30px;" />
                                    <img v-else :src="'data:image/png;base64,'+form.portrait_base64" style="width:40px;height:40px;margin-top: 50px;" />
                                </el-upload>
                            </div>
                        </div>
                    </div>
                    <el-button style="position: absolute;bottom: 0px;left: 50%;margin-left: -49px;" type="primary" @click="authSubmit">确认提交</el-button>
                </el-main>
            </el-container>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="authSubmit">确认提交</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
    var _this;
    export default {
        props: ["authDialog", 'users'],
        data() {
            return {
                verifyCode: "获取验证码",
                disabled: false,
                form: {
                    telephone: "",
                    portrait_base64: "",
                    identity_base64: ""
                }
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        methods: {
            onBeforeUpload: function(file) {
                var isIMAGE = ((file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type ===
                    'image/bmp') || (file.type === 'image/jpg'));
                if (!isIMAGE) {
                    this.$message.error('上传文件只能是图片格式（jpeg/png/bmp/jpg）');
                    return false
                }
                if (file.size / 1024 > 200) {
                    this.$alert('图片不能大于200kb', '异常提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return false
                }
            },
            changeIdentity: function(file, fileList) {
                var This = this;
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                reader.onload = function(e) {
                    this.result; //base64编码
                    _this.form.identity_base64 = this.result;
                }
            },
            changePortrait: function(file, fileList) {
                var This = this;
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                reader.onload = function(e) {
                    this.result; //base64编码
                    _this.form.portrait_base64 = this.result;
                }
            },
            toback: function() {
                this.$emit("toBack", "");
            },
            getVerifyCode: function() {
                var that = this;
                if (this.form.telephone == "") {
                    this.$message.error('请输入手机号！');
                    return;
                }
                this.common.post(this.api.getVerifyCodeRegister, {
                    telephone: this.form.telephone
                }, function(data) {
                    that.form.v_token = data.resultMap;
                    that.setInter();
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });

            },
            setInter: function() {
                var that = this;
                var countDown = 60;
                var timer = setInterval(function() {
                    countDown--;
                    that.verifyCode = "已发送（" + countDown + "）";
                    that.disabled = true;
                    if (countDown < 1) {
                        clearInterval(timer);
                        that.verifyCode = "获取验证码";
                        that.disabled = false;
                    }
                }, 1000);
            },
            authSubmit: function() {
                this.form.telephone = this.users.telephone;
                if (String.isEmptyOrNUll(this.form.telephone)) {
                    this.$message.error("请输入手机号码！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.code)) {
                    this.$message.error("请输入验证码！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.portrait_base64)) {
                    this.$message.error("请上传个人一寸照！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.identity_base64)) {
                    this.$message.error("请输入身份证正面照！");
                    return;
                }
                this.common.post(this.api.addUserInfo, this.form, function(res) {
                    _this.$message.success("实名认证成功！");
                    _this.$emit("authClick", false);
                }, function(err) {
                    // _this.form.portrait_base64 = "";
                    // _this.form.identity_base64 = "";
                    // _this.form.telephone = "";
                    // _this.users.telephone = "";
                    _this.$message.error(err.resultMsg);
                });
            }
        }
    }
</script>

<style>
    .fill {
        width: 100%;
        height: 100%;
    }

    #card .el-upload-dragger {
        width: 250px !important;
        height: 150px !important;
    }

    #photo .el-upload-dragger {
        width: 110px !important;
        height: 130px !important;
    }

    .authDia .input {
        width: 230px;
        height: 33px;
        background: rgba(237, 239, 244, 1);
        border-radius: 4px;
        border: 0;
        padding-left: 5px;
        padding-right: 5px;
    }

    .authDia .input:focus {
        outline: none;
    }
</style>
